<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="page">
        <el-form-item label="型号搜索：">
          <el-input v-model="page.name" class="elinput1" clearable placeholder="请输入" />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button class="btn1" size="small" icon="el-icon-circle-plus-outline" @click="addDialog = true">新建</el-button>
      <el-table
        :data="query"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="name"
          label="设备型号"
        />
        <el-table-column
          prop="model"
          label="设备编码"
        />
        <el-table-column
          prop="address"
          label="设备图片"
        >
          <template #default="{row}">
            <img :src="row.image" alt="" class="imgs">
          </template>
        </el-table-column>
        <el-table-column
          prop="vmRow"
          label="货道行"
        />
        <el-table-column
          prop="vmCol"
          label="货道列"
        />
        <el-table-column
          prop="channelMaxCapacity"
          label="设备容量"
        />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-link type="primary" @click="editList(row)">修改</el-link>
            <el-link type="danger" @click="deleList(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增设备类型 -->
    <el-dialog
      title="新增设备类型"
      :visible.sync="addDialog"
      width="40%"
      @close="addClose"
    >
      <el-form ref="addruleForm" :model="addFrom" :rules="addRules" label-width="120px">
        <el-form-item label="型号名称：" prop="name">
          <el-input
            v-model="addFrom.name"
            maxlength="10"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="型号编码：" prop="model">
          <el-input
            v-model="addFrom.model"
            maxlength="15"
            show-word-limit
            placeholder="请输入（限制数字，字母，中划线，下划线）"
          />
        </el-form-item>
        <el-form-item label="货道行数：" prop="vmRow">
          <template>
            <el-input-number v-model="addFrom.vmRow" controls-position="right" :min="0" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="货道列数：" prop="vmCol">
          <template>
            <el-input-number v-model="addFrom.vmCol" controls-position="right" :min="0" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="货道容量：" prop="channelMaxCapacity">
          <template>
            <el-input-number v-model="addFrom.channelMaxCapacity" controls-position="right" :min="0" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="设备图片：" prop="image">
          <Upload v-model="addFrom.image" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改设备类型 -->
    <el-dialog
      title="新增设备类型"
      :visible.sync="editDialog"
      width="40%"
      @close="editClose"
    >
      <el-form ref="editruleForm" :model="addFrom" :rules="addRules" label-width="120px">
        <el-form-item label="型号名称：" prop="name">
          <el-input
            v-model="addFrom.name"
            maxlength="10"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="型号编码：" prop="model">
          <el-input
            v-model="addFrom.model"
            maxlength="15"
            show-word-limit
            placeholder="请输入（限制数字，字母，中划线，下划线）"
          />
        </el-form-item>
        <el-form-item label="货道行数：" prop="vmRow">
          <template>
            <el-input-number v-model="addFrom.vmRow" controls-position="right" :min="0" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="货道列数：" prop="vmCol">
          <template>
            <el-input-number v-model="addFrom.vmCol" controls-position="right" :min="0" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="货道容量：" prop="channelMaxCapacity">
          <template>
            <el-input-number v-model="addFrom.channelMaxCapacity" controls-position="right" :min="0" :max="10" placeholder="请输入" />
          </template>
        </el-form-item>
        <el-form-item label="设备图片：" prop="image">
          <Upload v-model="addFrom.image" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="determineTheModifications">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { vendingMachineAPI, addNewDevicesAPI, editDevicesAPI, deleDevicesAPI } from '@/api/deviceManagement'
import Upload from '@/components/Upload/index.vue'
export default {
  components: { Upload },
  data() {
    return {
      page: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      totalCount: null,
      query: [],
      addDialog: false,
      editDialog: false,
      addFrom: {
        name: '',
        model: '',
        vmRow: undefined,
        vmCol: undefined,
        channelMaxCapacity: undefined,
        image: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        vmRow: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        vmCol: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        channelMaxCapacity: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      num: null,
      loadingstate: false,
      typeId: null
    }
  },
  created() {
    this.getvendingMachineAPI()
  },
  methods: {
    async getvendingMachineAPI() {
      const res = await vendingMachineAPI(this.page)
      this.query = res.currentPageRecords
      this.totalCount = res.totalCount - 0
      console.log(res)
    },
    inquire() {
      this.getvendingMachineAPI()
    },
    async addList() {
      await addNewDevicesAPI(this.addFrom).catch(err => {
        console.dir(err)
        if (err.request.status !== 200) {
          this.$message.error(err.response.data)
        }
      })
      // this.$message.success('添加成功！')
      this.getvendingMachineAPI()
      this.addDialog = false
    },
    editList(row) {
      console.log(row)
      this.addFrom.name = row.name
      this.addFrom.model = row.model
      this.addFrom.vmRow = row.vmRow
      this.addFrom.vmCol = row.vmCol
      this.typeId = row.typeId
      this.addFrom.channelMaxCapacity = row.channelMaxCapacity
      this.editDialog = true
      this.addFrom.image = row.image
    },
    async determineTheModifications() {
      await editDevicesAPI(this.addFrom, this.typeId).catch(() => this.$message.error('该售货机类型正在使用'))
    },
    async deleList(row) {
      const prve = await this.$confirm('确定删除该机器么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') { return this.$message.info('已取消删除') }
      await deleDevicesAPI(row.typeId).catch(() => {
        return this.$message.error('该售货机类型在使用')
      })
      // this.$message.success('删除成功！')
      this.getvendingMachineAPI()
    },
    editClose() {
      this.$refs.editruleForm.resetFields()
    },
    addClose() {
      this.$refs.addruleForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.btn1{
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
    color: #fff;

}
.imgs{
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
.el-input-number{
  width: 100%;
}
// 图片上传
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }
  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
  .el-link{
    margin-right: 15px;
  }

</style>
